<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const { postId } = route.params
const category = route.query.category || ''

// 模拟帖子数据
const mockPosts = {
  // 宠物类帖子
  '101': {
    id: '101',
    title: '如何训练狗狗定点大小便？',
    content: '家里的狗狗总是随地大小便，有什么有效的训练方法吗？已经尝试了一些方法但效果不佳。\n\n狗狗是一只6个月大的拉布拉多，非常活泼好动，但是没有养成良好的卫生习惯。我试过用诱导剂、定时带它出去等方法，但效果都不理想。\n\n有没有有经验的养狗人士可以分享一些实用的训练技巧？',
    author: '爱宠人士',
    avatar: 'https://picsum.photos/200/200?random=1',
    views: 789,
    likes: 123,
    replies: 45,
    time: '2023-06-15T10:30:00Z',
    category: 'pets'
  },
  '102': {
    id: '102',
    title: '猫咪掉毛严重怎么办？',
    content: '每到换毛季，家里到处都是猫毛，有什么好的解决办法吗？\n\n我家猫咪是英短，掉毛情况特别严重，沙发、床上、衣服上都是毛。已经买了粘毛器，但还是清理不完。\n\n有没有什么食物或者护理方法可以减少猫咪掉毛？',
    author: '猫咪铲屎官',
    avatar: 'https://picsum.photos/200/200?random=2',
    views: 654,
    likes: 98,
    replies: 34,
    time: '2023-06-14T16:20:00Z',
    category: 'pets'
  },
  '103': {
    id: '103',
    title: '养宠物需要准备哪些物品？',
    content: '第一次养宠物，不知道需要准备哪些必备物品，求推荐！\n\n我准备养一只小狗，但是完全没有经验，不知道从何开始。想了解一下养宠物需要准备的基本物品，比如食物、窝、玩具等。\n\n希望有经验的铲屎官能分享一下详细的准备清单和注意事项。',
    author: '新手铲屎官',
    avatar: 'https://picsum.photos/200/200?random=3',
    views: 521,
    likes: 87,
    replies: 26,
    time: '2023-06-13T09:15:00Z',
    category: 'pets'
  },
  '104': {
    id: '104',
    title: '狗狗饮食应该注意什么？',
    content: '不同品种的狗狗饮食需求有什么不同？日常应该如何搭配食物？\n\n我家有一只金毛和一只泰迪，想了解它们的饮食有什么区别，是否需要喂不同的食物。另外，有没有自制狗饭的配方推荐？\n\n希望能得到专业的饮食建议，让狗狗吃得健康又营养。',
    author: '宠物营养师',
    avatar: 'https://picsum.photos/200/200?random=4',
    views: 456,
    likes: 76,
    replies: 22,
    time: '2023-06-12T14:30:00Z',
    category: 'pets'
  },
  '105': {
    id: '105',
    title: '猫咪性格与品种关系分析',
    content: '不同品种的猫咪性格有什么特点？如何根据自己的生活习惯选择适合的猫咪？\n\n想养猫但不知道选择什么品种好。我平时工作比较忙，希望猫咪能独立一些，但又希望它亲人。\n\n有没有详细的猫咪品种性格对照表，以及新手养猫的品种推荐？',
    author: '猫咪专家',
    avatar: 'https://picsum.photos/200/200?random=5',
    views: 890,
    likes: 145,
    replies: 43,
    time: '2023-06-11T11:00:00Z',
    category: 'pets'
  },
  '106': {
    id: '106',
    title: '狗狗常见疾病预防指南',
    content: '狗狗容易患哪些常见疾病？如何提前预防？\n\n作为狗主人，最担心的就是狗狗生病。想了解一下狗狗的常见疾病、症状以及预防措施。\n\n另外，除了定期打疫苗外，还有哪些日常护理可以帮助狗狗保持健康？',
    author: '宠物医生',
    avatar: 'https://picsum.photos/200/200?random=6',
    views: 765,
    likes: 132,
    replies: 39,
    time: '2023-06-10T15:45:00Z',
    category: 'pets'
  },
  
  // 美妆类帖子
  '201': {
    id: '201',
    title: '新手如何化日常妆容？',
    content: '作为化妆新手，想学习简单的日常妆容，有什么推荐的教程或产品吗？\n\n我是化妆小白，平时很少化妆，但工作后需要适当化点妆提升形象。希望能学到简单易学的日常妆容技巧，不需要太复杂，但能让自己看起来精神一些。\n\n有什么适合新手的平价化妆品推荐吗？以及简单的步骤指导？',
    author: '美妆小白',
    avatar: 'https://picsum.photos/200/200?random=4',
    views: 890,
    likes: 145,
    replies: 56,
    time: '2023-06-13T09:15:00Z',
    category: 'beauty'
  },
  '202': {
    id: '202',
    title: '如何选择适合自己的护肤品？',
    content: '面对众多护肤品品牌和产品，不知道如何选择适合自己肤质的，求指导。\n\n我是混合性肌肤，T区比较油，两颊偏干。目前正在使用一些基础的护肤品，但效果一般。\n\n想了解一下不同肤质的护肤重点，以及如何根据季节调整护肤方案？',
    author: '护肤达人',
    avatar: 'https://picsum.photos/200/200?random=5',
    views: 765,
    likes: 123,
    replies: 42,
    time: '2023-06-12T14:30:00Z',
    category: 'beauty'
  },
  '203': {
    id: '203',
    title: '敏感肌肤护理心得分享',
    content: '自己是敏感肌肤，经过多年摸索总结了一些护理经验，希望能帮助到大家。\n\n我的肌肤非常敏感，稍微用错产品就会发红、发痒。经过多年的尝试，终于找到了适合自己的护理方法。\n\n想和大家分享一下我的敏感肌护理心得，包括产品选择、护理步骤以及需要避开的成分。',
    author: '敏感肌患者',
    avatar: 'https://picsum.photos/200/200?random=6',
    views: 654,
    likes: 108,
    replies: 38,
    time: '2023-06-11T11:00:00Z',
    category: 'beauty'
  },
  '204': {
    id: '204',
    title: '夏日防晒全攻略',
    content: '夏天如何有效防晒？不同肤质应该如何选择防晒产品？\n\n夏天到了，防晒又成了重中之重。但市面上防晒产品太多，不知道如何选择。\n\n想了解一下不同SPF值的区别，物理防晒和化学防晒的特点，以及如何根据自己的肤质和需求选择合适的防晒产品。',
    author: '防晒专家',
    avatar: 'https://picsum.photos/200/200?random=7',
    views: 987,
    likes: 167,
    replies: 62,
    time: '2023-06-10T15:45:00Z',
    category: 'beauty'
  },
  '205': {
    id: '205',
    title: '口红颜色如何搭配肤色',
    content: '不同肤色适合什么颜色的口红？如何根据场合选择合适的口红？\n\n买了很多口红，但总觉得不适合自己。想了解一下如何根据自己的肤色选择适合的口红色号。\n\n另外，日常妆容、约会妆容、职场妆容分别适合什么颜色的口红？希望能得到详细的搭配建议。',
    author: '彩妆师',
    avatar: 'https://picsum.photos/200/200?random=8',
    views: 876,
    likes: 156,
    replies: 58,
    time: '2023-06-09T18:20:00Z',
    category: 'beauty'
  },
  '206': {
    id: '206',
    title: '熬夜肌肤急救方法',
    content: '经常熬夜，皮肤状态不好，有什么快速改善的方法吗？\n\n工作经常需要熬夜，第二天皮肤暗沉、浮肿，看起来很没精神。\n\n想知道有没有什么急救面膜、按摩手法或者其他方法，可以快速改善熬夜后的肌肤状态？',
    author: '熬夜党',
    avatar: 'https://picsum.photos/200/200?random=9',
    views: 1234,
    likes: 210,
    replies: 76,
    time: '2023-06-08T19:30:00Z',
    category: 'beauty'
  },
  
  // 知识类帖子
  '301': {
    id: '301',
    title: '如何提高阅读效率？',
    content: '想读更多的书，但阅读速度太慢，有什么方法可以提高阅读效率吗？\n\n我平时喜欢读书，但阅读速度比较慢，一天只能读几十页。想学习一些快速阅读的方法，但又担心影响理解和记忆。\n\n有什么平衡阅读速度和理解深度的好方法吗？',
    author: '爱书人',
    avatar: 'https://picsum.photos/200/200?random=7',
    views: 678,
    likes: 112,
    replies: 38,
    time: '2023-06-11T11:00:00Z',
    category: 'knowledge'
  },
  '302': {
    id: '302',
    title: '家庭网络如何搭建更稳定？',
    content: '家里网络总是不稳定，尤其是多个设备同时使用时，有什么好的解决方案吗？\n\n我家住在高层，Wi-Fi信号覆盖不好，而且经常卡顿。特别是晚上大家都在用网络的时候，看视频都会缓冲。\n\n想了解一下如何优化家庭网络，是否需要更换路由器，或者添加信号放大器？',
    author: '网络工程师',
    avatar: 'https://picsum.photos/200/200?random=8',
    views: 543,
    likes: 98,
    replies: 34,
    time: '2023-06-10T15:45:00Z',
    category: 'knowledge'
  },
  '303': {
    id: '303',
    title: '新手如何学习编程？',
    content: '零基础想学习编程，应该从哪种语言开始学起？有什么好的学习资源推荐吗？\n\n我是完全的编程小白，最近对编程产生了兴趣，想自学编程。但面对众多的编程语言，不知道从何开始。\n\n希望有经验的程序员能分享一下学习路径、推荐一些好的入门教程，以及学习过程中的心得和建议。',
    author: '编程入门',
    avatar: 'https://picsum.photos/200/200?random=9',
    views: 789,
    likes: 134,
    replies: 47,
    time: '2023-06-09T18:20:00Z',
    category: 'knowledge'
  },
  '304': {
    id: '304',
    title: '有效记忆方法分享',
    content: '如何提高记忆力？有哪些科学有效的记忆技巧？\n\n我发现自己的记忆力不太好，学习新东西总是记不住。想学习一些科学的记忆方法，提高学习效率。\n\n有没有什么经过科学验证的记忆技巧，比如记忆宫殿、联想记忆等，希望能分享具体的应用方法。',
    author: '记忆大师',
    avatar: 'https://picsum.photos/200/200?random=10',
    views: 1023,
    likes: 187,
    replies: 65,
    time: '2023-06-08T19:30:00Z',
    category: 'knowledge'
  },
  '305': {
    id: '305',
    title: '基础理财知识入门',
    content: '理财小白应该如何开始理财？有哪些基础的理财工具和产品？\n\n刚工作不久，想开始理财但完全不知道从何入手。对基金、股票、债券等投资产品都不太了解。\n\n希望有理财经验的朋友能分享一些入门知识，推荐适合新手的理财方式，以及需要注意的风险。',
    author: '理财顾问',
    avatar: 'https://picsum.photos/200/200?random=11',
    views: 987,
    likes: 176,
    replies: 62,
    time: '2023-06-07T14:20:00Z',
    category: 'knowledge'
  },
  '306': {
    id: '306',
    title: '时间管理四象限法则',
    content: '如何运用四象限法则进行有效的时间管理？实际应用中有哪些技巧？\n\n听说四象限法则是一种很好的时间管理方法，但不知道具体如何应用。每天感觉很忙但又效率不高。\n\n想了解一下如何将日常任务分类，如何区分重要紧急和重要不紧急的事情，以及如何实际操作和坚持下去。',
    author: '效率专家',
    avatar: 'https://picsum.photos/200/200?random=12',
    views: 876,
    likes: 165,
    replies: 58,
    time: '2023-06-06T10:15:00Z',
    category: 'knowledge'
  },
  
  // 电子产品类帖子
  '401': {
    id: '401',
    title: '如何选择适合的笔记本电脑？',
    content: '想买一台新的笔记本电脑，主要用于办公和轻度游戏，有什么推荐吗？\n\n预算在5000-7000元左右，主要用于日常办公、看视频，偶尔玩一些中小型游戏。希望续航能好一点，重量不要太重。\n\n有什么具体的型号推荐，或者选购时需要注意哪些参数？',
    author: '数码小白',
    avatar: 'https://picsum.photos/200/200?random=13',
    views: 890,
    likes: 145,
    replies: 52,
    time: '2023-06-10T15:45:00Z',
    category: 'electronics'
  },
  '402': {
    id: '402',
    title: '手机摄影技巧分享',
    content: '如何用手机拍出专业水准的照片？有哪些好用的摄影APP推荐？\n\n现在手机的拍照功能越来越强大，但我拍出来的照片总是感觉很普通。想学习一些手机摄影的技巧。\n\n希望能分享一些构图技巧、光线运用、后期处理等方面的经验，以及推荐一些实用的手机摄影APP。',
    author: '摄影爱好者',
    avatar: 'https://picsum.photos/200/200?random=14',
    views: 1234,
    likes: 210,
    replies: 76,
    time: '2023-06-09T18:20:00Z',
    category: 'electronics'
  },
  '403': {
    id: '403',
    title: '智能家居设备选购指南',
    content: '想打造智能家居，从哪些设备开始比较好？有什么性价比高的产品推荐？\n\n对智能家居很感兴趣，但不知道从何开始。想逐步打造一个智能的家，但预算有限。\n\n希望有经验的朋友能推荐一些入门级的智能家居设备，以及如何规划智能家居的建设步骤。',
    author: '科技达人',
    avatar: 'https://picsum.photos/200/200?random=15',
    views: 765,
    likes: 132,
    replies: 47,
    time: '2023-06-08T19:30:00Z',
    category: 'electronics'
  },
  
  // 教育类帖子
  '501': {
    id: '501',
    title: '如何培养孩子的学习兴趣？',
    content: '孩子对学习没有兴趣，作为家长应该如何引导和培养？\n\n我家孩子上小学三年级，对学习总是提不起兴趣，做作业拖拖拉拉，需要家长催促。我们也尝试过一些奖励机制，但效果不持久。\n\n有什么好的方法可以激发孩子的内在学习动力吗？',
    author: '家长求助',
    avatar: 'https://picsum.photos/200/200?random=16',
    views: 987,
    likes: 167,
    replies: 63,
    time: '2023-06-09T18:20:00Z',
    category: 'education'
  },
  '502': {
    id: '502',
    title: '大学生如何规划课余时间？',
    content: '大学课余时间很多，如何合理规划才能让自己更充实？\n\n刚上大学，发现课余时间比高中多了很多，但不知道如何安排这些时间。看到很多学长学姐推荐参加社团、兼职、考证等。\n\n想了解一下如何根据自己的专业和兴趣合理规划课余时间，让大学生活更加充实和有意义。',
    author: '大学新生',
    avatar: 'https://picsum.photos/200/200?random=17',
    views: 876,
    likes: 156,
    replies: 58,
    time: '2023-06-08T19:30:00Z',
    category: 'education'
  },
  
  // 健康类帖子
  '601': {
    id: '601',
    title: '办公室久坐如何保护颈椎？',
    content: '长时间在办公室久坐，颈椎经常疼痛，有什么保护和缓解的方法吗？\n\n作为一名程序员，每天需要在电脑前工作8小时以上，最近感觉颈椎越来越不舒服，有时候还会头晕。\n\n想知道有什么简单的颈椎操、办公姿势调整方法，以及日常需要注意的事项来保护颈椎健康。',
    author: '办公室白领',
    avatar: 'https://picsum.photos/200/200?random=18',
    views: 1023,
    likes: 187,
    replies: 65,
    time: '2023-06-15T10:30:00Z',
    category: 'health'
  },
  '602': {
    id: '602',
    title: '如何科学减重？',
    content: '想健康地减轻体重，有什么科学的方法和建议吗？\n\n尝试过很多减肥方法，但效果都不理想，而且容易反弹。想了解一下科学的减重原理和方法。\n\n希望能得到关于饮食控制、运动计划、生活习惯调整等方面的建议，以及如何避免常见的减肥误区。',
    author: '健身爱好者',
    avatar: 'https://picsum.photos/200/200?random=19',
    views: 1234,
    likes: 210,
    replies: 76,
    time: '2023-06-14T16:20:00Z',
    category: 'health'
  },
  '603': {
    id: '603',
    title: '每日饮水指南',
    content: '每天应该喝多少水？什么时候喝水最健康？\n\n都说多喝水对身体好，但具体应该喝多少水，什么时候喝水，喝什么样的水，这些问题我都不太清楚。\n\n希望能得到一份科学的饮水指南，包括饮水量、饮水时间、饮水种类等方面的建议。',
    author: '健康顾问',
    avatar: 'https://picsum.photos/200/200?random=24',
    views: 890,
    likes: 145,
    replies: 52,
    time: '2023-06-13T09:15:00Z',
    category: 'health'
  },
  '604': {
    id: '604',
    title: '春季过敏怎么办？',
    content: '每到春季就容易过敏，打喷嚏、流鼻涕，有什么好的缓解方法吗？\n\n我有季节性过敏，每到春天花粉、柳絮漫天飞舞的时候，就会出现打喷嚏、流鼻涕、眼睛发痒等症状，非常难受。\n\n想了解一下除了药物治疗外，还有哪些生活调理、环境改善的方法可以缓解过敏症状？',
    author: '过敏患者',
    avatar: 'https://picsum.photos/200/200?random=25',
    views: 765,
    likes: 123,
    replies: 47,
    time: '2023-06-12T14:30:00Z',
    category: 'health'
  },
  '605': {
    id: '605',
    title: '如何改善睡眠质量？',
    content: '经常失眠，睡眠质量差，第二天精神不好，有什么改善的方法吗？\n\n我最近总是难以入睡，即使睡着了也容易醒来，睡眠质量很差，导致第二天工作效率低下，精神不振。\n\n想了解一下有什么改善睡眠的方法，包括睡前习惯调整、饮食注意事项、环境改善等方面的建议。',
    author: '失眠困扰者',
    avatar: 'https://picsum.photos/200/200?random=26',
    views: 1123,
    likes: 198,
    replies: 72,
    time: '2023-06-11T11:00:00Z',
    category: 'health'
  },
  '606': {
    id: '606',
    title: '中医养生小常识',
    content: '想了解一些简单实用的中医养生方法，日常生活中如何调理身体？\n\n对中医养生很感兴趣，但对中医理论了解不多。希望能学习一些简单易懂、适合日常操作的中医养生方法。\n\n比如穴位按摩、食疗方、日常作息建议等方面的内容，希望有中医知识的朋友能分享一些实用的养生小常识。',
    author: '中医爱好者',
    avatar: 'https://picsum.photos/200/200?random=37',
    views: 1023,
    likes: 187,
    replies: 65,
    time: '2023-06-10T09:00:00Z',
    category: 'health'
  },
  '607': {
    id: '607',
    title: '办公室健康小贴士',
    content: '长期久坐办公室，有什么保持健康的小贴士？如何缓解颈椎和腰椎疼痛？\n\n作为一名办公室白领，每天至少8小时坐在电脑前，感觉身体各种不适，尤其是颈椎和腰椎经常酸痛。\n\n除了定期运动外，在办公室里有什么简单易行的健康小贴士？如何调整坐姿？有什么缓解疲劳的小方法？',
    author: '办公室白领',
    avatar: 'https://picsum.photos/200/200?random=38',
    views: 1234,
    likes: 210,
    replies: 76,
    time: '2023-06-09T15:30:00Z',
    category: 'health'
  },
  '608': {
    id: '608',
    title: '儿童营养与健康',
    content: '如何为孩子提供均衡的营养？儿童健康成长需要注意哪些问题？\n\n孩子正处于生长发育的关键时期，作为家长很关心如何让孩子吃得健康，促进身体和智力的发育。\n\n希望了解儿童不同年龄段的营养需求，如何搭配饮食，以及日常生活中需要注意的健康问题，比如视力保护、运动锻炼等。',
    author: '关注儿童健康',
    avatar: 'https://picsum.photos/200/200?random=39',
    views: 987,
    likes: 167,
    replies: 63,
    time: '2023-06-08T14:20:00Z',
    category: 'health'
  },
  '609': {
    id: '609',
    title: '季节性疾病预防',
    content: '不同季节容易发生哪些疾病？如何做好季节性预防？\n\n每个季节都有一些高发的疾病，比如春季过敏、夏季中暑、秋冬季节的呼吸道疾病等。\n\n希望能了解各个季节的常见疾病及其预防方法，包括饮食调理、生活习惯调整、环境改善等方面的建议。',
    author: '养生达人',
    avatar: 'https://picsum.photos/200/200?random=40',
    views: 876,
    likes: 156,
    replies: 58,
    time: '2023-06-07T10:15:00Z',
    category: 'health'
  },
  '610': {
    id: '610',
    title: '家庭急救常识',
    content: '日常生活中应该掌握哪些基本的家庭急救知识？急救箱应该准备什么？\n\n生活中难免会遇到一些突发情况，比如割伤、烫伤、中暑、心脏病发作等，掌握一些基本的急救知识非常重要。\n\n希望能分享一些常见意外伤害的急救方法，以及家庭急救箱应该准备哪些物品，如何正确使用这些急救物品。',
    author: '安全意识强',
    avatar: 'https://picsum.photos/200/200?random=41',
    views: 1345,
    likes: 223,
    replies: 82,
    time: '2023-06-06T09:30:00Z',
    category: 'health'
  },
  
  // 金融类帖子
  '701': {
    id: '701',
    title: '新手如何开始基金投资？',
    content: '想开始投资基金，但不知道从何入手，有什么入门建议吗？\n\n对基金投资很感兴趣，但完全是小白一枚。不知道什么是指数基金、股票基金、债券基金，也不知道如何选择适合自己的基金。\n\n希望有经验的投资者能分享一下入门知识、投资策略，以及需要注意的风险。',
    author: '投资小白',
    avatar: 'https://picsum.photos/200/200?random=20',
    views: 890,
    likes: 145,
    replies: 52,
    time: '2023-06-15T10:30:00Z',
    category: 'finance'
  },
  '702': {
    id: '702',
    title: '年轻人如何合理规划收入？',
    content: '刚工作不久，如何合理分配收入，既保证生活质量又能有所储蓄？\n\n刚参加工作，工资不高但开销不少，感觉存不下什么钱。想学习一下如何合理规划自己的收入。\n\n希望能分享一些收入分配的比例建议，如何控制消费，以及如何逐步积累财富的方法。',
    author: '职场新人',
    avatar: 'https://picsum.photos/200/200?random=21',
    views: 765,
    likes: 132,
    replies: 47,
    time: '2023-06-14T16:20:00Z',
    category: 'finance'
  },
  '703': {
    id: '703',
    title: '如何选择适合自己的保险？',
    content: '市面上保险种类繁多，不知道如何选择适合自己的保险产品。\n\n面对重疾险、医疗险、意外险、寿险等各种保险产品，不知道应该如何选择。作为年轻人，应该优先配置哪些保险？\n\n希望能得到关于保险选择的建议，包括不同年龄段的保险配置策略，以及如何避免保险误区。',
    author: '保险咨询',
    avatar: 'https://picsum.photos/200/200?random=27',
    views: 987,
    likes: 167,
    replies: 63,
    time: '2023-06-13T09:15:00Z',
    category: 'finance'
  },
  '704': {
    id: '704',
    title: '如何建立应急储备金？',
    content: '应急储备金应该存多少？放在哪里比较合适？\n\n听说理财第一步是建立应急储备金，但不知道具体应该存多少，以及应该选择什么样的理财方式来存放应急储备金。\n\n希望能得到关于应急储备金的具体建议，包括金额确定、存放方式、使用原则等方面的内容。',
    author: '理财规划师',
    avatar: 'https://picsum.photos/200/200?random=28',
    views: 876,
    likes: 156,
    replies: 58,
    time: '2023-06-12T14:30:00Z',
    category: 'finance'
  },
  '705': {
    id: '705',
    title: '如何避免消费陷阱？',
    content: '现在促销活动很多，经常忍不住冲动消费，有什么方法可以理性消费？\n\n每次看到打折促销就忍不住买很多东西，但很多买回来之后发现并不需要，造成浪费。想改变这种消费习惯。\n\n希望能分享一些避免冲动消费的方法，如何制定购物计划，以及如何培养理性消费的习惯。',
    author: '理性消费者',
    avatar: 'https://picsum.photos/200/200?random=29',
    views: 1023,
    likes: 187,
    replies: 65,
    time: '2023-06-11T11:00:00Z',
    category: 'finance'
  },
  
  // 旅行类帖子
  '801': {
    id: '801',
    title: '国内小众旅行目的地推荐',
    content: '不想去热门景点人挤人，有什么小众但风景优美的旅行目的地推荐吗？\n\n每次假期热门景点都是人山人海，想找一些人少景美的小众目的地。希望能避开拥挤的人群，真正享受旅行的乐趣。\n\n请大家推荐一些国内的小众旅行目的地，最好是风景优美、人不太多，而且交通相对便利的地方。',
    author: '旅行达人',
    avatar: 'https://picsum.photos/200/200?random=22',
    views: 987,
    likes: 167,
    replies: 63,
    time: '2023-06-15T10:30:00Z',
    category: 'travel'
  },
  '802': {
    id: '802',
    title: '旅行行李打包技巧',
    content: '每次旅行都带太多东西，有什么高效的行李打包方法吗？\n\n我每次出门旅行总是带很多东西，但到了目的地发现很多都用不上，反而增加了行李负担。想学习一些高效的行李打包技巧。\n\n希望能分享一些打包技巧、收纳工具推荐，以及如何根据旅行天数和目的地气候合理准备行李。',
    author: '经常出差',
    avatar: 'https://picsum.photos/200/200?random=23',
    views: 876,
    likes: 156,
    replies: 58,
    time: '2023-06-14T16:20:00Z',
    category: 'travel'
  },
  '803': {
    id: '803',
    title: '如何制定旅行预算？',
    content: '计划一次旅行，如何合理制定预算，既玩得开心又不会超支？\n\n每次旅行前都不知道应该准备多少预算，往往到了目的地才发现花费超出预期。想学习如何科学制定旅行预算。\n\n希望能得到关于旅行预算分配的建议，包括交通、住宿、餐饮、景点门票等各方面的预算控制方法。',
    author: '预算旅行家',
    avatar: 'https://picsum.photos/200/200?random=30',
    views: 765,
    likes: 132,
    replies: 47,
    time: '2023-06-13T09:15:00Z',
    category: 'travel'
  },
  '804': {
    id: '804',
    title: '旅途中如何保证安全？',
    content: '一个人旅行，安全是首要考虑的问题，有什么安全小贴士吗？\n\n我经常一个人出去旅行，虽然自由但也有安全方面的顾虑。想了解一下独自旅行时需要注意的安全事项。\n\n希望能分享一些旅行安全的经验，包括目的地选择、住宿安全、交通安全、财物保管等方面的建议。',
    author: '独自旅行者',
    avatar: 'https://picsum.photos/200/200?random=31',
    views: 890,
    likes: 145,
    replies: 52,
    time: '2023-06-12T14:30:00Z',
    category: 'travel'
  },
  '805': {
    id: '805',
    title: '如何拍出好看的旅行照片？',
    content: '旅行中想拍出美美的照片，但摄影技术有限，有什么简单的技巧吗？\n\n每次旅行都想留下美好的回忆，但自己拍出来的照片总是感觉很普通。想学习一些简单的旅行摄影技巧。\n\n希望能分享一些适合新手的旅行摄影技巧，包括构图、光线、角度等方面的建议，以及如何利用手机拍出好看的旅行照片。',
    author: '旅行摄影爱好者',
    avatar: 'https://picsum.photos/200/200?random=32',
    views: 1023,
    likes: 187,
    replies: 65,
    time: '2023-06-11T11:00:00Z',
    category: 'travel'
  },
  
  // 其他教育类帖子
  '201_edu': {
    id: '201_edu',
    title: '孩子学习成绩不好怎么办？',
    content: '孩子上初中，学习成绩一直不太理想，作为家长应该如何帮助他提高学习成绩？\n\n孩子平时学习也挺努力的，但成绩就是上不去，尤其是数学和英语。我们也请过家教，但效果不是很明显。\n\n有没有同样情况的家长可以分享一下经验？应该如何激发孩子的学习兴趣和提高学习效率？',
    author: '学生家长',
    avatar: 'https://picsum.photos/200/200?random=20',
    views: 412,
    likes: 89,
    replies: 36,
    time: '2023-06-08T19:30:00Z',
    category: 'education'
  },
  
  // 用户发布的帖子（用于个人主页显示）
  'user-post-1': {
    id: 'user-post-1',
    title: '我的第一次宠物训练经历',
    content: '分享一下我训练小狗的经验，虽然过程很艰难，但看到狗狗学会新技能还是很有成就感的！我采用了正向激励的方法，用零食奖励它正确的行为，大约花了2周时间，它就学会了定点大小便和简单的指令。训练过程中最重要的是耐心和坚持，不要轻易放弃。',
    category: 'pets',
    author: '当前用户',
    avatar: 'https://picsum.photos/200/200?random=user',
    views: 123,
    likes: 28,
    replies: 15,
    time: '2023-06-14T16:20:00Z'
  },
  'user-post-2': {
    id: 'user-post-2',
    title: '推荐一款很好用的护肤品',
    content: '最近使用了一款新的保湿产品，效果非常好，特别适合敏感肌肤的朋友们使用。这款产品不含酒精、香料等刺激性成分，质地轻盈好吸收，用了一个月后皮肤明显水润了很多，泛红问题也有所改善。价格也很亲民，强烈推荐给大家！',
    category: 'beauty',
    author: '当前用户',
    avatar: 'https://picsum.photos/200/200?random=user',
    views: 234,
    likes: 56,
    replies: 34,
    time: '2023-06-12T14:30:00Z'
  },
  'user-post-3': {
    id: 'user-post-3',
    title: '我的学习效率提升心得',
    content: '最近尝试了番茄工作法，发现对提高学习效率非常有帮助。每学习25分钟就休息5分钟，这样可以保持注意力高度集中，避免疲劳。同时我还会在学习前制定详细的计划，明确每个时间段要完成的任务，这样学习起来更有方向感。',
    category: 'knowledge',
    author: '当前用户',
    avatar: 'https://picsum.photos/200/200?random=user',
    views: 189,
    likes: 45,
    replies: 23,
    time: '2023-06-10T15:45:00Z'
  }
}

// 模拟回复数据
const mockReplies = {
  '1': [
    {
      id: 'r1',
      content: '我家猫咪之前也有过类似的情况，后来带去看兽医，发现是肠胃不好。建议你先观察一下猫咪的排便情况，如果有异常的话，最好尽快带它去看兽医。',
      author: '兽医小明',
      avatar: 'https://picsum.photos/200/200?random=101',
      time: '2023-06-15T11:15:00Z'
    },
    {
      id: 'r2',
      content: '也有可能是天气太热了，猫咪的食欲会下降。可以尝试给猫咪提供一些清淡的食物，比如鸡胸肉、鱼肉之类的，看看它会不会吃。',
      author: '养猫达人',
      avatar: 'https://picsum.photos/200/200?random=102',
      time: '2023-06-15T11:30:00Z'
    },
    {
      id: 'r3',
      content: '我家猫咪之前也是这样，后来换了一种猫粮就好了。可能是吃腻了之前的猫粮，可以尝试换一种口味或者品牌的猫粮。',
      author: '铲屎官小王',
      avatar: 'https://picsum.photos/200/200?random=103',
      time: '2023-06-15T12:00:00Z'
    }
  ],
  '101': [
    {
      id: 'r4',
      content: '预算5000左右的话，可以考虑联想小新Pro14或者华为MateBook 14，这两款笔记本的性价比都很高，配置也足够日常办公和轻度游戏使用。',
      author: '数码测评师',
      avatar: 'https://picsum.photos/200/200?random=104',
      time: '2023-06-14T17:00:00Z'
    },
    {
      id: 'r5',
      content: 'AMD处理器的性价比更高，尤其是在多核性能方面，适合多任务处理。Intel处理器的单核性能更强，适合玩游戏。根据你的需求，我觉得可以选择AMD处理器的笔记本。',
      author: '电脑爱好者',
      avatar: 'https://picsum.photos/200/200?random=105',
      time: '2023-06-14T17:30:00Z'
    },
    {
      id: 'r6',
      content: '续航的话，建议选择电池容量大一点的，最好有60Wh以上。另外，屏幕素质也很重要，建议选择1080P以上分辨率、72%NTSC以上色域的屏幕。',
      author: '笔记本专家',
      avatar: 'https://picsum.photos/200/200?random=106',
      time: '2023-06-14T18:00:00Z'
    }
  ],
  '201': [
    {
      id: 'r7',
      content: '我之前也遇到过类似的问题，后来发现是孩子的学习方法有问题。建议你和孩子一起分析一下，找出学习中的薄弱环节，然后针对性地进行辅导。',
      author: '教育专家',
      avatar: 'https://picsum.photos/200/200?random=107',
      time: '2023-06-13T20:15:00Z'
    },
    {
      id: 'r8',
      content: '英语的话，可以让孩子多听多读，培养语感。数学的话，建议多做题，掌握解题方法和技巧。另外，要注意孩子的学习兴趣，兴趣是最好的老师。',
      author: '英语老师',
      avatar: 'https://picsum.photos/200/200?random=108',
      time: '2023-06-13T20:45:00Z'
    },
    {
      id: 'r9',
      content: '可以尝试和孩子制定一个学习计划，合理安排时间，避免学习压力过大。同时，要多鼓励孩子，增强他的自信心。',
      author: '心理辅导师',
      avatar: 'https://picsum.photos/200/200?random=109',
      time: '2023-06-13T21:30:00Z'
    }
  ]
}

// 获取用户帖子数据（从localStorage或使用默认数据）
const getUserPosts = () => {
  try {
    const storedPosts = localStorage.getItem('posts')
    if (storedPosts) {
      const postsArray = JSON.parse(storedPosts)
      // 将数组转换为对象格式，以id为键
      return postsArray.reduce((acc, post) => {
        acc[post.id] = post
        return acc
      }, {})
    }
  } catch (error) {
    console.error('Failed to load posts from localStorage:', error)
  }
  // 默认返回mockPosts中标记为用户的帖子
  return Object.fromEntries(
    Object.entries(mockPosts).filter(([key]) => key.startsWith('user-post-'))
  )
}

// 当前帖子信息
const userPosts = getUserPosts()
const currentPost = ref(userPosts[postId] || mockPosts[postId] || {
  id: postId, 
  title: '帖子不存在', 
  content: '抱歉，该帖子不存在或已被删除。',
  author: '未知',
  avatar: 'https://picsum.photos/200/200?random=999',
  views: 0,
  likes: 0,
  replies: 0,
  time: new Date().toISOString()
})

// 检查作者是否为会员
const checkAuthorMembership = () => {
  try {
    const users = JSON.parse(localStorage.getItem('users') || '[]')
    const author = users.find(user => user.username === currentPost.value.author)
    if (author && author.isMember && author.memberExpiry) {
      const expiryDate = new Date(author.memberExpiry)
      return expiryDate > new Date()
    }
  } catch (error) {
    console.error('检查会员状态失败:', error)
  }
  return false
}

// 作者会员状态
const isAuthorMember = ref(false)

// 加载作者会员状态
const loadAuthorMembership = () => {
  isAuthorMember.value = checkAuthorMembership()
}

// 获取与帖子相关的评论
const getRelatedReplies = () => {
  // 首先尝试获取直接匹配postId的评论
  if (mockReplies[postId]) {
    return mockReplies[postId];
  }
  
  // 根据帖子分类查找相关评论
  const category = currentPost.value.category;
  
  // 为不同分类准备默认评论
  const categoryReplies = {
    'pets': mockReplies['1'] || [], // 使用宠物相关评论
    'tech': mockReplies['101'] || [], // 使用科技相关评论
    'education': mockReplies['201'] || [] // 使用教育相关评论
  };
  
  // 返回与分类相关的评论，如果没有则返回空数组
  return categoryReplies[category] || [];
};

// 当前帖子的回复列表
const postReplies = ref(getRelatedReplies())

// 回复输入框内容
const replyContent = ref('')

// 是否点赞
const isLiked = ref(false)

// 处理返回
const goBack = () => {
  if (category) {
    router.push(`/category/${category}`)
  } else {
    router.push('/home')
  }
}

// 处理点赞
const handleLike = (event) => {
  event.stopPropagation()
  isLiked.value = !isLiked.value
  currentPost.value.likes += isLiked.value ? 1 : -1
}

// 页面挂载时加载作者会员状态
onMounted(() => {
  loadAuthorMembership()
})

// 提交回复
const submitReply = () => {
  if (!replyContent.value.trim()) {
    alert('请输入回复内容')
    return
  }
  
  // 创建新回复
  const newReply = {
    id: `r${Date.now()}`,
    content: replyContent.value.trim(),
    author: '我',
    avatar: 'https://picsum.photos/200/200?random=500',
    time: new Date().toISOString()
  }
  
  // 添加到回复列表
  postReplies.value.push(newReply)
  currentPost.value.replies += 1
  
  // 清空输入框
  replyContent.value = ''
  
  // 显示成功提示
  alert('回复成功！')
}

// 格式化时间
const formatTime = (timeString) => {
  const now = new Date()
  const time = new Date(timeString)
  const diffMs = now - time
  const diffMins = Math.floor(diffMs / 60000)
  const diffHours = Math.floor(diffMs / 3600000)
  const diffDays = Math.floor(diffMs / 86400000)
  
  if (diffMins < 1) {
    return '刚刚'
  } else if (diffMins < 60) {
    return `${diffMins}分钟前`
  } else if (diffHours < 24) {
    return `${diffHours}小时前`
  } else if (diffDays < 7) {
    return `${diffDays}天前`
  } else {
    return time.toLocaleDateString('zh-CN')
  }
}

// 页面加载时初始化
onMounted(() => {
  // 增加浏览量
  currentPost.value.views += 1
  
  // 可以添加从本地存储或API加载数据的逻辑
})
</script>

<template>
  <div class="post-detail-container">
    <!-- 返回按钮 -->
    <button class="back-button" @click="goBack">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </button>

    <!-- 帖子详情 -->
    <article class="post-detail">
      <!-- 帖子头部 -->
      <div class="post-header">
        <img :src="currentPost.avatar" alt="用户头像" class="post-avatar">
        <div class="post-author-info">
          <div class="author-name-container">
            <h3 class="post-author">{{ currentPost.author }}</h3>
            <span v-if="isAuthorMember" class="member-badge">会员</span>
          </div>
          <span class="post-time">{{ formatTime(currentPost.time) }}</span>
        </div>
      </div>

      <!-- 帖子内容 -->
      <div class="post-content">
        <h1 class="post-title">{{ currentPost.title }}</h1>
        <div class="post-body" v-html="currentPost.content.replace(/\n/g, '<br>')"></div>
      </div>

      <!-- 帖子底部 -->
      <div class="post-footer">
        <button class="post-action like-button" @click="handleLike">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>{{ currentPost.likes }}</span>
        </button>
        <div class="post-action">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>{{ currentPost.replies }}</span>
        </div>
        <div class="post-action">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>{{ currentPost.views }}</span>
        </div>
      </div>
    </article>

    <!-- 回复区域 -->
    <section class="replies-section">
      <h2 class="replies-title">全部回复 ({{ postReplies.length }})</h2>
      
      <!-- 回复输入框 -->
      <div class="reply-input-container">
        <img src="https://picsum.photos/200/200?random=500" alt="我的头像" class="my-avatar">
        <div class="reply-input-wrapper">
          <textarea 
            v-model="replyContent"
            placeholder="写下你的回复..."
            class="reply-input"
            rows="3"
          ></textarea>
          <button class="submit-reply-button" @click="submitReply">提交回复</button>
        </div>
      </div>

      <!-- 回复列表 -->
      <div v-if="postReplies.length === 0" class="no-replies">
        <p>暂无回复，来发表第一条回复吧！</p>
      </div>
      
      <div class="replies-list">
        <div 
          v-for="reply in postReplies" 
          :key="reply.id"
          class="reply-item"
        >
          <img :src="reply.avatar" alt="用户头像" class="reply-avatar">
          <div class="reply-content">
            <div class="reply-header">
              <span class="reply-author">{{ reply.author }}</span>
              <span class="reply-time">{{ formatTime(reply.time) }}</span>
            </div>
            <p class="reply-text">{{ reply.content }}</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
/* 帖子详情容器 */
.post-detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
  min-height: 100vh;
}

/* 返回按钮 */
.back-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
  margin-bottom: 20px;
}

.back-button:hover {
  background-color: #f5f5f5;
}

/* 帖子详情 */
.post-detail {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 帖子头部 */
.post-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.post-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.post-author-info {
  flex: 1;
}

.author-name-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-author {
  font-size: 16px;
  margin: 0;
}

/* 会员标识 */
.member-badge {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  font-weight: 500;
  color: #333;
  margin: 0 0 4px 0;
}

.post-time {
  font-size: 14px;
  color: #999;
}

/* 帖子内容 */
.post-content {
  margin-bottom: 24px;
}

.post-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.post-body {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  white-space: pre-wrap;
}

/* 帖子底部 */
.post-footer {
  display: flex;
  gap: 32px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.post-action {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  cursor: pointer;
  transition: color 0.2s;
}

.post-action:hover {
  color: #3498db;
}

.like-button.active {
  color: #e74c3c;
}

/* 回复区域 */
.replies-section {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.replies-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 24px 0;
}

/* 回复输入框 */
.reply-input-container {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.my-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.reply-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reply-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
}

.reply-input:focus {
  outline: none;
  border-color: #3498db;
}

.submit-reply-button {
  align-self: flex-end;
  padding: 8px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-reply-button:hover {
  background-color: #2980b9;
}

/* 无回复提示 */
.no-replies {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

/* 回复列表 */
.replies-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.reply-item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.reply-item:last-child {
  border-bottom: none;
}

.reply-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.reply-content {
  flex: 1;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.reply-author {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.reply-time {
  font-size: 12px;
  color: #999;
}

.reply-text {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .post-detail-container {
    padding: 16px;
  }
  
  .post-detail,
  .replies-section {
    padding: 20px;
  }
  
  .post-title {
    font-size: 20px;
  }
  
  .post-body {
    font-size: 15px;
  }
  
  .post-footer {
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .post-detail-container {
    padding: 12px;
  }
  
  .post-detail,
  .replies-section {
    padding: 16px;
  }
  
  .post-title {
    font-size: 18px;
  }
  
  .post-body {
    font-size: 14px;
  }
  
  .reply-input-container {
    gap: 12px;
  }
  
  .my-avatar,
  .reply-avatar {
    width: 32px;
    height: 32px;
  }
}
</style>